<template>
  <div class="content">
    <a id="el_a">
      <div class="con">
        <div class="avator"></div>
        <div class="title">蓝湖- 高效的产品设计协作平台,这是一段需要三十个文字的投票…</div>
        <div class="mid">
          <div class="des">
            <div>长按识别二维码</div>
            <div>查看精彩活动</div>
          </div>
          <div class="qr"></div>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
/* eslint-disable */
import html2canvas from "html2canvas";
export default {
  name: "HelloWorld",
  data(){
    return {

    }
  },
  props: {
    msg: String
  },
  mounted() {
    html2canvas(document.querySelector('.con')).then(function(canvas) {
      let image = new Image()
      image.setAttribute("crossOrigin", "Anonymous")
      image.src = canvas.toDataURL("image/png")
      //长按事件
      let time = 0
      let el_a = document.querySelector("#el_a")
      el_a.addEventListener("touchstart", function(e) {
        e.stopPropagation()
        time = setTimeout(function() {
          el_a.download = "poster.png"
          el_a.href = image.src
          el_a.click()
          // el_a.remove()
        }, 300); 
      });
      el_a.addEventListener("touchend", function(e) {
        e.stopPropagation()
        clearTimeout(time)
      })
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  .con {
    background: url("../assets/images/bg.png") no-repeat;
    background-size: cover;
    width: 5.95rem;
    height: 7.66rem;
    position: fixed;
    left: 50%;
    margin-left: -2.975rem;
    top: 0.83rem;
    .avator {
      height: 1.62rem;
      width: 2.15rem;
      margin: 0 auto;
      margin-top: 1.35rem;
      background: url("../assets/images/avator.png") no-repeat;
      background-size: cover;
    }
    .title{
      margin: 0 auto;
      margin-top: 0.44rem;
      text-align: center;
      width:4.92rem;
      font-size:0.26rem;
      font-family:PingFang SC;
      font-weight:400;
      line-height:0.44rem;
      color:rgba(255,255,255,1);
    }
    .mid{
      margin-top: 0.84rem;
      color: white;
      overflow: hidden;
      .des{
        float: left;
        font-size: 0.26rem;
        margin-left: 1.09rem;
        width: 2rem;
        line-height:0.44rem;
        text-align: right;
      }
      .qr{
        float: left;
        margin-left: 0.24rem;
        height: 1.66rem;
        width: 1.64rem;
        background: url("../assets/images/qr.png") no-repeat;
        background-size: cover;
      }
    }
  }
}
</style>
